<template>
  <div class="home">
  	<!-- 搜索页 -->
    <div ref="mescroll" class="mescroll">
    	<div class="search-top">
    		<input class="search-input" type="text" v-model="keyword" name="" placeholder="请按照相关关键词搜索例如：哺乳期 喂奶">
    		<span class="search-span" v-if="keyword.length>0" @click="search_free_audios">搜索</span>
    		<span class="search-span" v-else @click="router({path: '/'})">取消</span>
    	</div>
    	<div class="tab" v-if="tabIndex != 0">
  	    <tab
  	    	active-color = "#FF659B"
  	    	custom-bar-width = "2rem"
  	    	>
  	      <tab-item :selected="(tabIndex === 1) ? true : false" @on-item-click="onItemClick(1)">付费课程</tab-item>
  	      <tab-item :selected="(tabIndex === 2) ? true : false" @on-item-click="onItemClick(2)">免费音频</tab-item>
  	      <tab-item :selected="(tabIndex === 3) ? true : false" @on-item-click="onItemClick(3)">活动中心</tab-item>
          <tab-item :selected="(tabIndex === 4) ? true : false" @on-item-click="onItemClick(4)">视频点播</tab-item>
  	    </tab>
  	    <div v-if="tabIndex === 1" class="course">    	
  	    	<div v-if="fu_ke && fu_ke.length > 0">
  	    		<div class="item-list" v-for="(item, index) in fu_ke" :key='index' @click="router({path: 'payDetials', query:{id: item.id}})">	    			
  		    		<div class="img">
  		    			<img :src="item.img">
  		    		</div>
  		    		<div class="con">
  		    			 <p class="tip">{{item.title}}</p>
  		    			 <p class="video-num">
  		    			 	<span class="time">
  		    			 		<img src="@/assets/yunbangkechen4.png"> {{item.audio_long}}
  		    			 	</span>
  		    			 	<span class="price">￥{{item.price}}</span>
  		    			 </p>
  		    		</div>
  	    		</div>
  	    	</div>	    	
  				<div class="none" v-else>
  					<img src="@/assets/kongzhuangtai.png" alt="">
  				</div>	
  	    </div>
  	    <div v-if="tabIndex === 2" class="audio">
  	    	<div v-if="audios && audios.length > 0">
  	    		<div class="item-list" v-for="(item, index) in audios" :key='index' @click="aduio_click(item)">
  		    		<p>{{item.title}}</p>
  		    		<div class="tip" v-show="item.checkIsThree == 0">
              {{item.checkIsThree}}
  		    			<span>{{item.father_info.column_info.title}} |</span>
  		    			<span> {{item.father_info.column_cate_info.title}}</span>
  		    		</div>
              <div class="tip" v-show="item.checkIsThree == 1">        
                <span>{{item.father_info.column_info.title}} |</span>
                <span v-if="item.father_info.column_freeAudio_info">{{item.father_info.column_freeAudio_info.title}} |</span>
                <span> {{item.father_info.column_cate_info.title}}</span>
              </div>
  	    		</div>
  	    	</div>	    	
  				<div class="none" v-else>
  					<img src="@/assets/kongzhuangtai.png" alt="">
  				</div>	
  	    </div>
  	    <div v-if="tabIndex === 3" class="activity">
  	    	<div v-if="activitys && activitys.length > 0">
  	    		<div class="item-list" v-for="(item, index) in activitys" :key='index' @click="router({path: 'activityDetails', query:{activity_id: item.id}})">
  		    		<div class="img">
  		    			<img :src="baseUrl + item.img">
  		    		</div>
  		    		<div class="con">
  		    			 <p class="tip">{{item.title}}</p>
  		    			 <p class="video-num">{{item.start_time | formatDate}}</p>
  		    		</div>
  	    		</div>
  	    	</div>   	
  				<div class="none" v-else>
  					<img src="@/assets/kongzhuangtai.png" alt="">
  				</div>	
  	    </div>
        <div v-if="tabIndex === 4" class="section recommed">
          <div v-if="videoList && videoList.length > 0">
            <div class="item-list border-block" v-for="(item, index) in videoList" :key="index" @click="router({path: 'videoDetails', query: {id: item.id}})">
              <div class="img">
                <img :src="item.img">
                <div class="mask-bg"><img src="@/assets/liebiao.png" alt=""></div>
              </div>
              <div class="con">
                 <p class="tip">{{item.title}}</p>
                 <p class="video-num">
                  <span class="time">
                    <img src="@/assets/yunbangkechen4.png"> {{item.leng}}
                  </span>
                 </p>
              </div>
            </div>
          </div>    
          <div class="none" v-else>
            <img src="@/assets/kongzhuangtai.png" alt="">
          </div>  
        </div>
    	</div>      
      <div class="none" v-else>
        <img src="@/assets/kongzhuangtai.png" alt="">
      </div>
    </div> 
  </div>
</template>

<script>

import { Tab, TabItem } from 'vux'
import { search_free_audio, fu_ke_cheng, search_activity_show, baseUrl, video_search } from '@/api/api'
import { formatDate } from '@/util/date.js'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

export default {
	filters:{
    formatDate(time){
      let date = new Date(time*1000);
      return formatDate(date,'yyyy.MM.dd');
      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
    }
	},
  components: {
    Tab,
    TabItem
  },
  data () {
    return {
    	tabIndex: 0,
    	keyword: '',
    	page: 1, // 先写死，第几页
    	pageSize: 50, //先写死，每页数量
    	audios: [],
    	fu_ke: [],
    	activitys: [],
      videoList: [],
    	baseUrl,
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {   
    aduio_click(item) {
      if(item.checkIsThree == 1){
        this.router({path: 'audioDetails', query:{id: item.id, is_three: true}})
      }else{
        this.router({path: 'audioDetails', query:{id: item.id, is_three: false}})
      }
    },
    router (path) {
      this.$router.push(path)
    },
  	onItemClick (index) {
  		this.tabIndex = index
      this.mescroll.resetUpScroll()
  	},
  	search_free_audios () {
      this.tabIndex = 2;
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    upCallback(page) {
      fu_ke_cheng(this.keyword, page.num, this.pageSize).then((res) => {
        if (page.num == 1){
          this.fu_ke = []
        }
        if(res.data == null){
          this.mescroll.endErr()
          return
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info);
        })
        if(res.data.info == null){
          return;
        }
        this.fu_ke = this.fu_ke.concat(res.data.info)
      }).then(() => {
  		  search_free_audio(this.keyword, page.num, this.pageSize).then((res) => {
          if (page.num == 1){
            this.audios = []
          }
          if(res.data == null){
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info);
          })
          if(res.data.info == null){
            return;
          }
          this.audios = this.audios.concat(res.data.info)
    		}).catch((err) => {
    			console.dir(err)
    		})
      }).then(() => {
        search_activity_show(this.keyword, page.num, this.pageSize).then((res) => {
          if (page.num == 1){
            this.activitys = []
          }
          if(res.data == null){
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info);
          })
          if(res.data.info == null){
            return;
          }
          this.activitys = this.activitys.concat(res.data.info)
        }).catch((err) => {
          console.dir(err)
        })
      }).then(() => {
        var dataJson = {
          keyword: this.keyword,
          page: page.num,
          pageSize: this.pageSize
        }
        video_search(dataJson).then((res) => {
          if (page.num == 1){
            this.videoList = []
          }
          if(res.data == null){
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info);
          })
          if(res.data.info == null){
            return;
          }
          this.videoList = this.videoList.concat(res.data.info)
        }).catch((err) => {
          console.dir(err)
        })
      })
  	}
  }
}
</script>
<style lang="stylus" scoped>
  .home
    background-color #fff
    min-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
    .none
      img
        width 15.4rem
        position absolute
        left 50%
        margin-left -7.7rem
        top 33%
    .search-top
      position: relative
      border-bottom 1rem solid #f2f2f2
      .search-input
        line-height 2.4rem
        color #333
        background-color #fff
        width 100%
        padding 1rem 5.5rem 1rem 1.5rem
        box-sizing border-box
        outline none
        font-size 1.3rem
        &::-webkit-input-placeholder
          color #999
      .search-span
        position absolute
        right 1.5rem
        top 1rem
        font-size 1.3rem
    .course
      background-color #fff
      .item-list
        display flex
        padding 2rem 0
        margin 0 1.5rem
        border-bottom 1px solid #e6e6e6
        .img
          width 12rem
          min-width 12rem
          max-width 12rem
          height 8rem
          border-radius .4rem
          overflow hidden
          position: relative
          margin-right 1.5rem
          img
            width 100%
            height 100%
        .con
          position relative
          .tip
            color #333
            font-weight bold
            font-size 1.5rem
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
          .video-num
            display flex
            width 100%
            line-height 1.4rem
            font-size 1.2rem
            color #999
            position absolute
            bottom .3rem
            .time
              color #999
              font-size 1.2rem
              display flex
              min-width 50%
              img
                width 1.4rem
                height 1.4rem
                margin-right .8rem
            .price
              color #FF659B
              line-height 1.4rem
              font-size 1.5rem
              font-weight bold
              min-width 50%
              text-align right
    .audio
      background-color #fff
      .item-list
        padding 2rem 0
        margin 0 1.5rem
        border-bottom 1px solid #e6e6e6
        p
          color #333
          font-weight bold
          font-size 1.5rem
          line-height 1.5rem
        .tip
          font-size 1.2rem
          line-height 1.2rem
          color #999
          margin-top 1.2rem
    .activity
      background #fff
      .item-list
        display flex
        padding 2rem 0
        margin 0 1.5rem
        border-bottom 1px solid #e6e6e6
        .img
          width 12rem
          min-width 12rem
          max-width 12rem
          height 9rem
          border-radius .4rem
          overflow hidden
          position: relative
          margin-right 1.5rem
          img
            width 100%
            height 100%
        .con
          position relative
          .tip
            font-size: 1.5rem;
            line-height: 2.4rem;
            color: #333;
            font-weight: bold;
            height: 4.8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          .video-num
            line-height 1.4rem
            font-size 1.2rem
            color #999
            position absolute
            bottom .3rem
    .section
      .border-block
        border-bottom 1px solid #e5e5e5
      .item-list
        display flex
        padding 2rem 0
        margin 0 1.5rem
        .img
          width 12rem
          min-width 12rem
          max-width 12rem
          height 8rem
          border-radius .4rem
          overflow hidden
          position: relative
          margin-right 1.5rem
          img
            width 100%
            height 100%
          span
            background-color rgba(0,0,0,.5)
            position absolute
            width 100%
            height 100%
            top 0px
            left 0px
            color #fff
            text-align center
            line-height 8rem
            font-size 1.5rem
        .con
          position relative
          flex 1
          .tip
            font-size 1.3rem
            line-height 2.4rem
            color #666
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          .video-num
            line-height 1.4rem
            font-size 1.2rem
            color #999
            position absolute
            bottom .3rem
    .recommed
      .mask-bg
        position absolute
        width 100%
        height 100%
        background-color rgba(0,0,0,.4)
        top 0
        left 0
        img
          width 2.7rem!important
          height 2.7rem!important
          position absolute
          left 50%
          top 50%
          margin-left -1.35rem
          margin-top -1.35rem
      .tip
        color #333
        font-weight bold
      .video-num
        display flex
        width 100%
        .time
          color #999
          font-size 1.2rem
          display flex
          min-width 50%
          img
            width 1.4rem
            height 1.4rem
            margin-right .8rem
</style>